<template>
	<view class="slide-vertical">
        <view class="slide-horizontal-wrap">
        <view class="vertical-wrapper">
          <view class="slide-vertical-wrapper" ref="slideRef">
             <view class="ignore-content">
                    The Blue area is not taken as BetterScroll's content
              </view>
             <view>
              <view v-for="item in 3" :key="id" class="slide-page">
                <view class="slide-horizontal">
                    <slot/>
                </view>
             </view>
             </view>
         
          </view>
          </view>
    </view>
  </view>
</template>

<script setup>
import { onUnmounted, reactive, ref, defineProps, getCurrentInstance, onMounted, nextTick, defineEmits } from 'vue'
import BScroll from 'better-scroll'
const currentPageIndex = ref(0)
const slideRef = ref(null)
const emit = defineEmits(['updateIndex'])

 const _onScrollEnd = (e)=> {
		console.log({e})
 }

 const initBSscrollX = ()=>{
    const slide = new BScroll('.slide-vertical-wrapper', {
			scrollX: true,
			scrollY: false,
			slide: {
				threshold: 10,
				loop:false,
				autoplay:false,
			},
			useTransition: true,
			
			momentum: false,
			bounce: false,
			stopPropagation: true,
			specifiedIndexAsContent: 1,
			probeType: 2
		})
        return slide
 }

onMounted(async () => {
	const { proxy } = getCurrentInstance()
    nextTick(()=>{
       const bs = initBSscrollX()
       bs.on('scrollEnd', _onScrollEnd)
	   bs.on('slideWillChange', (page) => {
            const index = page.pageX
            emit('updateIndex', index)
            currentPageIndex.value = index
  		})
		bs.on('slidePageChanged', (page) => {
			// console.log('CurrentPage changed to => ', page)
		})
    })
})


</script>

<style lang="scss" scoped>
.slide-vertical{
	height:calc(100vh - 80upx);
  .vertical-wrapper{
    position:relative;
    height:100%;
    font-size:0;
	z-index: 10;
  .slide-vertical-wrapper{
    height:100%;
    overflow:hidden;
    background-color: #FF2442;
    .slide-page{
      display:inline-block;
      width:100%;
      line-height:200px;
      text-align:center;
      font-size:26px;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;
	  color:#fff;
	  position: relative;
	  box-sizing: border-box;
	  border: 4px solid red;
	  height:calc(100vh - 80upx);
	  &-footer{
		position: absolute;
		bottom: 0;
		z-index: 200;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		&-shopName{
			font-size: 14px;
			color:#fff;
			font-weight: 500;
			margin-left: 8upx;
			line-height: 1;
			width: 220upx;
			text-align: left;
		}
		&-attention{
			font-size: 24upx;
			color:#fff;
			line-height: 1;
			flex-shrink: 0;
			background-color: #FF2442;
			padding: 12upx 22upx;
			border-radius: 200upx;
			text-align: center;
			margin-right: 20upx;

		}
	  }
	}
	}
	}
}

.slide-horizontal{
    &-wrap{}
}
.video-player{
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	z-index: 0;
	// height: 600upx;
}
</style>
